import React, {Component} from 'react'
import { Tabs, Form, Input, Button, Table, DatePicker, Icon } from 'antd';
const { TabPane } = Tabs;
const { RangePicker } = DatePicker

class Order extends Component{
  state = {
    rowSelection: {},
    dataSource: [],
    expand: false
  };
  toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };
  render(){
    const columns = [
      {
        title: '订单号',
        dataIndex: 'order_no',
        key: 'order_no',
      },
      {
        title: '创建时间',
        dataIndex: 'create_date',
        key: 'create_date',
      },
      {
        title: '客户名称',
        dataIndex: 'user_name',
        key: 'user_name',
      },
      {
        title: '商品名称',
        dataIndex: 'pay_name',
        key: 'pay_name',
      },
      {
        title: '数量',
        dataIndex: 'pay_num',
        key: 'pay_num',
      },
      {
        title: '订单价格',
        dataIndex: 'pay',
        key: 'pay',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <Button type="primary" size="small">发货</Button>
            <Button type="danger" size="small">删除</Button>
          </span>
        )
      }
    ]
    return (
      <div classs="order">
        <Form layout="inline">
          <Form.Item label="订单号">
            <Input placeholder="请输入要查询的订单号"></Input>
          </Form.Item>
          <Form.Item label="创建时间">
            <RangePicker />
          </Form.Item>
          <Form.Item label="客户名称">
            <Input placeholder="请输入要查询的客户名称"></Input>
          </Form.Item>
          <Form.Item>
            <Button type="primary">查询</Button>
          </Form.Item>
          <Form.Item>
            <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
              更多查询 <Icon type={this.state.expand ? 'up' : 'down'} />
            </a>
          </Form.Item>
          <Form.Item label="商品名称" style={{display: this.state.expand?'inline-block':'none'}}>
            <Input placeholder="请输入要查询的商品名称"></Input>
          </Form.Item>
        </Form>
        <Tabs defaultActiveKey="1">
          <TabPane tab="全部" key="0"></TabPane>
          <TabPane tab="待付款" key="1"></TabPane>
          <TabPane tab="待发货" key="2"></TabPane>
          <TabPane tab="已发货" key="3"></TabPane>
          <TabPane tab="待退款" key="4"></TabPane>
          <TabPane tab="已完成" key="5"></TabPane>
        </Tabs>
        <Table {...this.state} columns={columns}></Table>
      </div>
    )
  }
}
export default Form.create()(Order)